const mountNode = document.getElementById('table2');
const {
    BrowserRouter,
    Route,
    Link
} = ReactRouterDOM;
const {Table, Icon, Switch, Radio, Form, Divider} = antd;
const FormItem = Form.Item;

const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 150,
        render: text => <a href="#">{text}</a>,
    }, {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        width: 70,
    }, {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
    }, {
        title: '操作',
        key: 'action',
        width: 360,
        render: (text, record) => (
            <span>
      <a href="#">Action 一 {record.name}</a>
      <Divider type="vertical"/>
      <a href="#">Delete</a>
      <Divider type="vertical"/>
      <a href="#" className="ant-dropdown-link">
        More actions <Icon type="down"/>
      </a>
    </span>
        ),
    }];

const data = [];
for (let i = 1; i <= 10; i++) {
    data.push({
        key: i,
        name: '张三',
        age: `${i}2`,
        address: `鑫城区. ${i} 号`,
        description: `我叫张三, 今年 ${i}2 岁, 家住鑫城区. ${i} 号.`,
    });
}

const expandedRowRender = record => <p>{record.description}</p>;
const title = () => '表格标题';
const showHeader = true;
const footer = () => '表格页脚';
const scroll = {y: 240};

class Demo extends React.Component {
    state = {
        bordered: false,
        loading: false,
        pagination: true,
        size: 'default',
        expandedRowRender,
        title,
        showHeader,
        footer,
        rowSelection: {},
        scroll: undefined,
    }

    handleToggle = (prop) => {
        return (enable) => {
            this.setState({[prop]: enable});
        };
    }

    handleSizeChange = (e) => {
        this.setState({size: e.target.value});
    }

    handleExpandChange = (enable) => {
        this.setState({expandedRowRender: enable ? expandedRowRender : undefined});
    }

    handleTitleChange = (enable) => {
        this.setState({title: enable ? title : undefined});
    }

    handleHeaderChange = (enable) => {
        this.setState({showHeader: enable ? showHeader : false});
    }

    handleFooterChange = (enable) => {
        this.setState({footer: enable ? footer : undefined});
    }

    handleRowSelectionChange = (enable) => {
        this.setState({rowSelection: enable ? {} : undefined});
    }

    handleScollChange = (enable) => {
        this.setState({scroll: enable ? scroll : undefined});
    }

    render() {
        const state = this.state;
        return (
            <div>
                <div className="components-table-demo-control-bar">
                    <Form layout="inline">
                        <FormItem label="Bordered">
                            <Switch checked={state.bordered} onChange={this.handleToggle('bordered')}/>
                        </FormItem>
                        <FormItem label="loading">
                            <Switch checked={state.loading} onChange={this.handleToggle('loading')}/>
                        </FormItem>
                        <FormItem label="Pagination">
                            <Switch checked={state.pagination} onChange={this.handleToggle('pagination')}/>
                        </FormItem>
                        <FormItem label="Title">
                            <Switch checked={!!state.title} onChange={this.handleTitleChange}/>
                        </FormItem>
                        <FormItem label="Column Header">
                            <Switch checked={!!state.showHeader} onChange={this.handleHeaderChange}/>
                        </FormItem>
                        <FormItem label="Footer">
                            <Switch checked={!!state.footer} onChange={this.handleFooterChange}/>
                        </FormItem>
                        <FormItem label="Expandable">
                            <Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange}/>
                        </FormItem>
                        <FormItem label="Checkbox">
                            <Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange}/>
                        </FormItem>
                        <FormItem label="Fixed Header">
                            <Switch checked={!!state.scroll} onChange={this.handleScollChange}/>
                        </FormItem>
                        <FormItem label="Size">
                            <Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}>
                                <Radio.Button value="default">Default</Radio.Button>
                                <Radio.Button value="middle">Middle</Radio.Button>
                                <Radio.Button value="small">Small</Radio.Button>
                            </Radio.Group>
                        </FormItem>
                    </Form>
                </div>
                <Table {...this.state} columns={columns} dataSource={data}/>
            </div>
        );
    }
}

ReactDOM.render(<Demo/>, mountNode);